Mobile Application Modeling

Avant-propos

http://bit.ly/jmb-apsio

La promo 2016/2017

promo2016

La promo 2017/2018

promo2017

Disclaimer

Désolé…​

Content

Organisation prévue

Module de 21h (14 créneaux de 1,5h):

Let’s start Brainstorming

whiteboard2015
Technos2016
brainstorm2017

Background 2015/2016

Résultats du brainstorming 2019/2020 TBD…​ :

Répartition des technos connues (depuis 2015) :

Wrap-up

Par petits groupes :

Les numéros ne représentent pas un ordre d’importance!

Plans B …​

[1] Site web des fiches

Je fait parti de ce groupe!

[2] Concepts UML connus

[3] Outils et langages de description d’écrans

[4] Plateformes de développement Android

[5] Différences /

Consignes

Pour chaque groupe (sauf [1]) :

Fiche

Résultats

En 2015/2016 nous avons eu deux équipes chargées du site web :

http://jmbruel.github.com/MobileModeling1 http://jmbruel.github.com/MobileModeling2

Pour 2016/2017 :

http://jmbruel.github.com/MobileModeling2016-1 http://jmbruel.github.com/MobileModeling2016-2

En 2017/2018 :

https://gitlab.iut-blagnac.fr/jbourdieux/MobileMod1 https://gitlab.iut-blagnac.fr/jmbruel/MobileModeling2

Exemple complet de démarche "ad hoc" autour d’UML

Exemple complet de démarche "ad hoc" autour d’UML

Nous allons aborder une étude de cas tirée du livre de Pascal Roques.

prfc

Pour un aperçu du livre, cf. http://www.editions-eyrolles.com/Chapitres/9782212110708/chap01.pdf.

Le cahier des charges

Il s’agit de développer un service de vente en ligne (http://jeBouquine.com).

Depuis l’écriture du livre un vrai site de vente utilise cette URL!

Des besoins au code

(c) Pascal Roques

Raffinement des besoins

(c) Pascal Roques

Près du code

(c) Pascal Roques

Comment trouver les classes ?

(c) Pascal Roques

Comment trouver les interactions ?

(c) Pascal Roques

Liens entre diagrammes

(c) Pascal Roques

Démarche complète

(c) Pascal Roques

Diagrammatic models

UML Use Case Diagram

Exemple de Diagramme d'UC

SysML Requirements Diagram

Exemple de Diagramme d'Exigence SysML

Sketch and drawings (Maquettes)

Dessin complexe

https://iutblagnac.mybalsamiq.com

Axure

UML Class Diagram

Exemple de Diagramme de classe

SNI: Schéma de Navigation d’Interface

Exemple de SNI
Il existe un plug-in Eclipse pour SNI: http://sourceforge.net/projects/visual-sni/

Lien UC / SNI

Lien UC / SNI

UML State Machines

Diagramme d'états

UML Sequence Diagram

Diagramme de Séquence

UML Component Diagram

Diagramme de Composant
Source: http://www.uml-diagrams.org/deployment-diagrams.html

SysML Block Definition Diagram

Exemple de Diagramme de BDD SysML

SysML Internal Block Definition Diagram

Exemple de Diagramme d'IBD SysML

UML deployment diagram

Deployement
Source: http://www.uml-diagrams.org/deployment-diagrams.html

Process examples

One example

Source: http://www.javacodegeeks.com/2013/07/android-uml-design-an-app-part-1.html

Agile for Mobile Application Development

Example 1

Some restrictions with mobile application development are:

Taken from http://www.infoq.com/news/2014/10/agile-mobile-application

Example 2

Challenges presented by developing mobile apps:

See: http://sourcebits.com/app-development-design-blog/what-is-agile-development-for-mobile-apps/

Example 3

An “Agile with Discipline” approach for mobile app development

agile with discipline model
Taken from [IBM]

Example 4

Multi-target User Interface design & Generation using MDE

Veldhuis
Taken from [Veldhuis2013]

Reverse Engineering tools

Case Study

Content

Etude de cas : MIU (Management of Irit-Ut2j)

Cahier des charges

SLAT

Le Laboratoire IRIT est un des plus gros laboratoire informatique de France. C’est une unité mixte de recherche, ce qui signifie qu’en plus du CNRS, elle a d’autres tutelles (les 3 universités toulousaine, l’INPT, etc.).

Chaque tutelle est dotée d’un représentant local du laboratoire qui fait le lien entre le laboratoire et la tutelle. Pour l’UT2J, ce représentant, c’est moi (Jean-Michel Bruel). Les membres UT2J du Laboratoire IRIT sont organisés en équipes. Ils se partagent un buget alloué chaque année par l’université (environ 38K€ pour 2017).

Parmi les responsabilité du responsable IRIT-UT2J, on trouve de nombreuses tâches administratives (au point de devoir maintenir une F.A.Q - cf. https://bit.ly/irit-ut2j).

Celles qui sont le plus consomatrices d’énergie sont les tâches en relation avec les dépenses.

demandeAchat

Je vous sollicite donc pour la modélisation d’une application mobile qui sera potentiellement développée dans le future, et qui permettra de faciliter cette gestion. Pour simplifier les description suivantes, nous appelerons cette application MIU (Management of IRIT-UT2J)[1].

Voici quelques caractéristiques et besoins clients (en vrac) :

Quelques commentaires :

finances IRIT UT2J

Questions

  1. Réalisez un diagramme des cas d’utilisation de cette application.
    uc
    Figure 1. Exemple 2015/2016 (Ballades VTT)
  2. Réalisez un diagramme de domaine (diagramme des classes métiers) de cette application.
    dc2
    Figure 2. Exemple 2015/2016 (Ballades VTT)
  3. Réalisez un diagramme (de votre choix) pour représenter les écrans (et leur enchainement) de votre application.
    balsamiq
    Figure 3. Exemple 2015/2016 d’une maquette en Balsamiq (Ballades VTT)

Un écran est composé d’éléments structurels. Il peut donc être représenté avec un diagramme de classe.

enchainement
Figure 4. Exemple 2015/2016 (Ballades VTT)

Les enchainements d’écrans peuvent être décrits comme des comportements. On peut utiliser :

Une correction possible - Exemple 2016/2017 (SLAT Parapente)
Figure 5. Une correction possible - Exemple 2016/2017 (SLAT Parapente)
enchainement slat
Figure 6. Une correction possible - Autre exemple 2016/2017 (SLAT Parapente)

Outils

Résultats attendus

Evaluation

Rappelons les conseils habituels :

Evaluation (suite)

L’évaluation portera principalement sur les critères suivants :

Table 1. Critères
CritèreType de critèrePoids approximatif

Diagramme des UC

Correction, pertinence

10%

Diagramme des Classes Domaine

Correction, pertinence

10%

Maquettes utilisateur / Écrans

Correction, pertinence

20%

Diagrammes d’enchainement d’écran

Correction, pertinence

20%

Cohérence inter-modèles (SNI/DSS, UC/DSS/DS/DCP)

Correction, pertinence

15%

Communication/Présentations/Ignite

subjectif :-)

15%

Clarté – Présentation du Dossier

subjectif :-)

10%

Evaluation (suite)

Vous pouvez insérer une section "auto-évaluation" dans votre rapport, qui reprend cette grille et vous permet de vous auto-évaluer.

About…​

This web site has been developped by JMB using the following (open and free) tools:

The End       (for me!)